<template>
	<view @click="navigate('/page_other/work/detail?id='+detail.id)" class="work-item-com">
		<view class="head-info">
			<view class="work-type">{{valuationText.name}}</view>
			<view class="work-name">{{detail.name}}</view>
			<view class="price">{{detail.price}}<text class="unit">{{detail.price_text}}</text></view>
		</view>
		<view class="info-item">开工日期：{{detail.start_time_text}}</view>
		<text class="info-item" space="nbsp" decode="true">{{detail.distance_calc}}&nbsp;&nbsp;|&nbsp;&nbsp;{{detail.address}}</text>
		<view class="com-block">
			<image class="com-logo" :src="detail.department.logo"></image>
			<view class="com-name">{{detail.department?detail.department.name:''}}</view>
			<view v-if="detail.process_status==2&&is_employed==2" style="color: red;" class="status-text">未被录用</view>
			<view v-else class="status-text">{{detail.process_status_text||''}}</view>
			
		</view>
	</view>
</template>

<script>
	export default{
		name:'WorkItem',
		data(){
			return{
			}
		},
		props:{
			detail:{
				type:Object,
				default:()=>{
					return {valuation:1,name:'',start_time_text:'',distance:'',address:'',price_text:'',price:'',department:{logo:'',name:''}}
				}
			},
			is_employed:{
				
			}
		},
		computed:{
			valuationText(){
				let obj={}
				switch(this.detail.valuation){
					case 1:
						obj={name:'短期工',unit:'元/天'};
						break;
					case 2:
						obj={name:'小时工',unit:'元/时'};
						break;
					case 3:
						obj={name:'计件工',unit:'元/100件'};
						break;
					default:
						obj={name:'短期工',unit:'元/天'};
				}
				return obj
			},
		}
	}
</script>

<style lang="scss" scoped>
	.work-item-com{
		width: 100%;
		background: #fff;
		border-radius: 12px;
		padding: 0 30rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
		.head-info{
			margin-top: 30rpx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.work-type{
				width: 100rpx;
				border-radius: 4px;
				color:#fa9b17;
				background: #fcf2d8;
				font-size: 24rpx;
				padding: 2px 7px;
				margin-right: 20rpx;
				text-align: center;
			}
			.work-name{
				width: calc(100% - 295rpx);
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				margin-right: auto;
			}
			.price{
				width:175rpx;
				font-weight: bold;
				font-size: 34rpx;
				text-align: right;
				color: $orange-color;
				.unit{
					font-weight: normal;
					font-size: 24rpx;
				}
			}
		}
		.info-item{
			display: block;
			margin-top:30rpx;
			font-size: 26rpx;
			color: #767676;
		}
		.com-block{
			margin-top: 20rpx;
			height: 100rpx;
			display: flex;
			align-items: center;
			border-top: 1px solid #ededed;
			.com-logo{
				width: 60rpx;
				height: 60rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
			.com-name{
				width: calc(100% - 200rpx);
				overflow: hidden;
				text-overflow:ellipsis;
				white-space: nowrap;
				font-size: 28rpx;
			}
			.status-text{
				font-size: 28rpx;
				color: $orange-color;
				width: 120rpx;
				text-align: right;
			}
		}
	}
</style>